<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
import ChartPublic from "@/views/modules/preview/components/char-component/chart-public.js";

/**
 * 多色仪表盘
 */
export default {
	name: "multiColorGauge-view",
	mixins:[ChartPublic],
	data() {
		return {
			chartType:"gauge",
			defColours: [
				[0.3, '#4285f4'],
				[0.7, '#81c784'],
				[1, '#ffb74d']
			]
		}
	},
	methods: {
		setOption() {
			let data=[];
			//静态数据模式
			if(this.config.dataSources.source=="static") {
				if (this.config.dataSources.staticData) {
					//静态数据
					data = JSON.parse(this.config.dataSources.staticData);
				}
			}else {
				for (let i = 0; i < this.config.dataSources.measures.length; i++) {
					let measure=this.config.dataSources.measures[i];
					let key=measure.tableName+"_"+measure.fieldName;
					let obj={
						name: measure.fieldLabel
					}
					for (let j = 0; j < this.data.length; j++) {
						if(!obj.value){
							obj.value=this.data[j][key];
						}else {
							obj.value+=this.data[j][key];
						}
					}
					if(this.config.dataSources.measures.length>1){
						let val=0;
						//配置长度为偶数时
						if(this.config.dataSources.measures.length%2==0){
							//取一半作为标记
							let num=this.config.dataSources.measures.length/2;
							if(i<num){
								val="-"+(50/num)*(i+1);
							}else {
								val=(50/num)*(i+1-num);
							}
						}else {
							let num=Math.floor(this.config.dataSources.measures.length/2);
							if(i<num){
								val="-"+(50/num)*(i+1);
							}else if(i==num) {
								val="0";
							}else {
								val=(50/num)*(i-1);
							}
						}
						obj.title={
							offsetCenter: [val+'%', '80%']
						};
						obj.detail={
							offsetCenter: [val+'%', '95%']
						};
					}
					data.push(obj);
				}
			}
			let series={
				type: 'gauge',
				data: data
			};
			series=this.getSeries(series);
			this.option = {
				series: series
			};
		},
		getSeries(series){
			if(this.config.styles.gaugeConfig){
				//仪表盘半径
				if(this.config.styles.gaugeConfig.radiusSuffix =='px'){
					series['radius'] = this.config.styles.gaugeConfig.radius
				}else {
					series['radius'] = this.config.styles.gaugeConfig.radius +'%'
				}
				//仪表盘中心位置
				let center = this.config.styles.gaugeConfig.centreCoordinate.split(',');
				if(center && center.length ==2){
					series['center'] = center;
				}
				//设置开始角度和结束角度
				series['startAngle'] = this.config.styles.gaugeConfig.startAngle;//开始角度
				series['endAngle'] = this.config.styles.gaugeConfig.endAngle;//结束角度
				//最小刻度，最大刻度
				series['min'] = this.config.styles.gaugeConfig.minScale || 0;//最小刻度
				series['max'] = this.config.styles.gaugeConfig.maxScale || 100;//最大刻度
				//仪表盘坐标轴线配置
				//仪表盘颜色
				let gaugeColours=[];
				//用于标记颜色是否填满了100%
				let falg=false;
				if(this.config.styles.gaugeConfig.multicolorLabel){
					for (let i = 0; i < this.config.styles.gaugeConfig.multicolorLabel.length; i++) {
						let conf= this.config.styles.gaugeConfig.multicolorLabel[i];
						if(conf.value){
							let arr=[];
							let number=conf.value/100;
							if(number==1){
								falg=true;
							}
							arr.push(number);
							arr.push(conf.color);
							gaugeColours.push(arr)
						}
					}
				}else {
					gaugeColours=this.defColours;
				}
				//颜色未填满了100%
				if(!falg){
					gaugeColours.push([1, '#3fb1e3'])
				}
				let axisLine = {
					show:this.config.styles.gaugeConfig.showAxis,
					roundCap:this.config.styles.gaugeConfig.axisRound,
					lineStyle:{
						width:this.config.styles.gaugeConfig.axisWidth,
						color:gaugeColours,
					},
				}
				series['axisLine'] = axisLine;
				//分割线
				let splitLine ={
					show:this.config.styles.gaugeConfig.showSplitLine,
					length:this.config.styles.gaugeConfig.splitLineWidth,
					distance:Number(this.config.styles.gaugeConfig.lineDistance),
					lineStyle:{
						width:this.config.styles.gaugeConfig.lineWidth,
						color:this.config.styles.gaugeConfig.lineColor,
					}
				}
				series['splitLine'] = splitLine;
				//刻度线
				let axisTick ={
					show: this.config.styles.gaugeConfig.showTickMark,
					length:this.config.styles.gaugeConfig.splitTickWidth,
					distance:Number(this.config.styles.gaugeConfig.tickDistance),
					//刻度分割段数
					splitNumber:this.config.styles.gaugeConfig.segmentsNum,
					lineStyle:{
						width:this.config.styles.gaugeConfig.tickWidth,
						color:this.config.styles.gaugeConfig.tickColor
					}
				}
				series['axisTick'] = axisTick;
				//刻度标签
				let axisLabel = {
					show:this.config.styles.gaugeConfig.showTickLabel,
					color: this.config.styles.gaugeConfig.tickLabelFontColor,
					fontSize: this.config.styles.gaugeConfig.tickLabelFontFontSize,
					distance:Number(this.config.styles.gaugeConfig.tickLabelFontSize)
				}
				if(this.config.styles.gaugeConfig.formatter && this.config.styles.gaugeConfig.formatter.replace(/\s*/g,"")){
					if(this.config.styles.gaugeConfig.formatterMode=="template"){
						axisLabel.formatter=this.config.styles.gaugeConfig.formatter;
					}else if(this.config.styles.gaugeConfig.formatter) {
						//格式化
						axisLabel.formatter =new Function("value","index",this.config.styles.gaugeConfig.formatter);
					}
				}
				series['axisLabel'] = axisLabel;
				//仪表盘标题
				let title = {
					show: this.config.styles.gaugeConfig.showTitle,
					color: this.config.styles.gaugeConfig.titleColor,
					fontSize: this.config.styles.gaugeConfig.titleFontSize
				}
				let offsetCenter = this.config.styles.gaugeConfig.titleSeat.split(',');
				if(offsetCenter && offsetCenter.length ==2){
					title['offsetCenter'] = offsetCenter;
				}
				series['title'] = title;
				//仪表盘指针
				let pointer = {
					show: this.config.styles.gaugeConfig.showHand,
					length: this.config.styles.gaugeConfig.handLength,
					width: this.config.styles.gaugeConfig.handWidth,
					itemStyle: {color: 'auto'}
				}
				series['pointer'] = pointer;
				//指针固定点
				let anchor = {
					show: this.config.styles.gaugeConfig.showFixedPoint,
					showAbove: this.config.styles.gaugeConfig.onPointer,
					size: this.config.styles.gaugeConfig.fixedPointSize,
					itemStyle:{
						color:this.config.styles.gaugeConfig.fixedPointColor,
						borderColor:this.config.styles.gaugeConfig.fixedLineColor,
						borderWidth:this.config.styles.gaugeConfig.fixedLineWidth
					}
				}
				series['anchor'] = anchor;
				series["detail"]= {
					valueAnimation: true,
					show:this.config.styles.gaugeConfig.showData,
					fontSize: this.config.styles.gaugeConfig.dataFontSize,
					color: this.config.styles.gaugeConfig.dataColor
				}
				if(this.config.styles.gaugeConfig.dataSeat){
					let dataSeat = this.config.styles.gaugeConfig.dataSeat.split(',');
					series.detail.offsetCenter=dataSeat;
				}
				if(this.config.styles.gaugeConfig.dataFormatter && this.config.styles.gaugeConfig.dataFormatter.replace(/\s*/g,"")){
					if(this.config.styles.gaugeConfig.dataFormatterMode=="template"){
						series["detail"].formatter=this.config.styles.gaugeConfig.dataFormatter;
					}else if(this.config.styles.gaugeConfig.dataFormatter) {
						//格式化
						series["detail"].formatter =new Function("value","index",this.config.styles.gaugeConfig.dataFormatter);
					}
				}
				series['splitNumber'] = this.config.styles.gaugeConfig.splitNumber
			}
			return series;
		}
	},
}
</script>

<style scoped>
</style>
